<!doctype html>
<html><!-- InstanceBegin template="/Templates/mybaihe2.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">

 <link rel="stylesheet" href="mybaihe2.css" type="text/css"/>
<!-- InstanceBeginEditable name="doctitle" -->
<title>我的照片</title>
<link rel="shortcut icon" type="image/x-icon" href="image/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/imgareaselect-animated.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.min.js"></script>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="stylee" -->

<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>

<body>
	<!--头部-->
    <header>
    	<script type="text/javascript" src="js/header.js"></script>
    </header>
    <script>var uls=document.getElementsByClassName("menu_more");
	for(var i=0;i<uls.length;i++){
		uls.item(i).onmouseover=function(){
			this.getElementsByTagName("ul")[0].style.display="block";
		}
		uls.item(i).onmouseout=function(){
			this.getElementsByTagName("ul")[0].style.display="none";
		}
		
	}</script>
    <!--左部-->
    <div id="second">
        <div id="a">
        	<div class="aa">
        		<img class="aaa" src="image/1442748364541.gif"></br>
            </div>
        	<a href="photo.html">&nbsp;上传照片&nbsp;</a>
        	<a href="ziliao.html">&nbsp;编辑资料&nbsp;</a>
            <ul>
            	<li>我的等级：普通会员</li>
                <li>认证等级：1级</li>
            </ul>
            <div class="ab">
            	<ul>
                	<li class="abb">3</br><a href="">消息</a></li>
                    <li class="abb">0</br><a href="">红豆</a></li>
                    <li>0</br><a href="">花瓣</a></li>
                </ul>
            </div>
        </div>
        
        <div id="b">
        <h3>推荐服务</h3>
        	<ul>
            	<li class="b1"><a href=""><img src="image/xiao/1.png" height="25px" width="25px">水晶会员</a>&nbsp;&nbsp;&nbsp;&nbsp;<div class="bb">开&nbsp;通</div><p class="bbb">红娘帮忙牵线搭桥寻对象</p></li>
                <li><a href=""><img src="image/xiao/2.png" height="25px" width="25px">红娘牵线</a>&nbsp;&nbsp;&nbsp;&nbsp;<div class="bb">开&nbsp;通</div><p class="bbb">更多展示机会,提高成功</p></li>
                <li><a href=""><img src="image/xiao/3.png" height="25px" width="25px">至尊会员</a>&nbsp;&nbsp;&nbsp;&nbsp;<div class="bb">开&nbsp;通</div><p class="bbb">百合通用虚拟货币</p></li>
                <li><a href=""><img src="image/xiao/4.png" height="25px" width="25px">百合红豆</a>&nbsp;&nbsp;&nbsp;&nbsp;<div class="bb">开&nbsp;通</div></li>
                <li><a href="" class="b5">更多</a></li>
            </ul>
        </div>
        
        <div id="c">
        	<h3>百合应用</h3>
        	<ul>
            	<li><a href=""><img src="image/xiao/a.png" height="25px" width="25px">恋爱帮帮忙</a></li>
            	<li><a href=""><img src="image/xiao/b.png" height="25px" width="25px">成长俱乐部</a></li>
                <li><a href=""><img src="image/xiao/c.png" height="25px" width="25px">丘比特之箭</a></li>
                <li><a href=""><img src="image/xiao/d.png" height="25px" width="25px">心灵匹配测试</a></li>
                <li><a href=""><img src="image/xiao/e.png" height="25px" width="25px">Love双重奏</a></li>
                <li><a href=""><img src="image/xiao/f.png" height="25px" width="25px">红豆工厂</a></li>
                <li><a href=""><img src="image/xiao/g.png" height="25px" width="25px">花瓣抽奖</a></li>
                <li><a href=""><img src="image/xiao/h.png" height="25px" width="26px">幸运宝藏</a></li>
                <li><a href=""><img src="image/xiao/i.png" height="25px" width="26px">相亲助手</a></li>
                <li><a href=""><img src="image/xiao/j.png" height="25px" width="27px">恋爱ing</a></li>
            </ul>
       </div>
        
        <div id="d">
        <h3>百合账户</h3>
        	<ul>
            	<li><a href=""><img src="image/xiao/z1.png" height="25px" width="25px">我的资料</a></li>
            	<li><a href=""><img src="image/xiao/z2.png" height="25px" width="25px">我的照片</a></li>
                <li><a href=""><img src="image/xiao/z3.png" height="25px" width="25px">我的认证</a></li>
                <li><a href=""><img src="image/xiao/z4.png" height="25px" width="25px">手机认证</a></li>
                <li><a href=""><img src="image/xiao/z5.png" height="25px" width="25px">实名认证</a></li>
                <li><a href=""><img src="image/xiao/z6.png" height="25px" width="25px">择偶意向</a></li>
                <li><a href=""><img src="image/xiao/z7.png" height="25px" width="25px">账号设置</a></li>
            </ul>
      </div>
    </div>
    
    <!--右部-->
    <div id="third">
        <div class="myData">
        
            <h3>
                <div class="speed">
                    <div class="box"><div style="width:0;" class="strip"></div></div> 
                    <span>资料完整度</span><span class="orangeT" id="dataOrang">0%</span>
                </div>
                <p class="zi">我的资料</p>
            </h3>
            
            <div class="mainNav" id="wmainNav">
            	<ul>
            		<li tabIndex="0"><a href="ziliao.html">基本资料</a></li>
            		<li tabIndex="1"><a href="photo.html" class="active">我的照片</a></li>
                	<li tabIndex="2"><a href="myself.html">自我介绍</a></li>
                	<li tabIndex="3"><a href="music.html">详细资料</a></li>
                	<li tabIndex="4"><a href="mylike.html">个人喜好</a></li>
            	</ul>
            </div>
            
           <div class="wswich">
            <!--此处为基本资料-->
			<!-- InstanceBeginEditable name="body" -->
            <style>
            .ph1_bg1{
				width:312px;
				height:385px;
				background:#EDEDED;
				margin-top:20px;
				float:left;
				}
			
			.ph1_bg2{
				width:123px;
				height:152px;
				background:url(image/mybaihee/zaza/ph1_bg1.png) no-repeat;
				margin-top:20px;
				float:right;
				margin-left:3px;
				overflow:hidden;
				
				}
			.ph1_bg3{
				width:84px;
				height:103px;
				background:url(image/mybaihee/zaza/ph1_bg2.png) no-repeat;
				margin-top:180px;
				margin-left:315px;
				overflow:hidden;
				}
			.ph1 a {
				background: #ff7f00 none repeat scroll 0 0;
				border-radius: 10px;
				color: #fff;
				font-size: 16px;
				margin-left: 250px;
				padding: 10px 50px;
				text-align: center;
				}
            </style>
           
			<div class="photo">
                <div class="ti">
            	<p>有照片的会员征友成功率比没照片的高出8倍，上传资料完整度增加<span style="color:#FE812F">20%</span>哦！</p>
                </div>
            	<h4 class="mT30">上传头像&nbsp;&nbsp;<span class="cbd">如果无法上传文件，请使用<a href="">普通上传模式</a></span></h4>
                <!--此处为我的照片正文-->
                <div class="ph">
                	<div class="ph1" style="display:block">
                    	<div class="ph1_bg2">
                        	<img src="image/mybaihee/zaza/5.png" height="152" width="123" id="imgg2"/>
                         </div>
                        
                    	<div class="ph1_bg1">
                        	<img src="image/mybaihee/zaza/5.png" height="385" width="312" style="cursor:pointer" id="imgg1"/>
                            <video height="385px" width="312px" id="myvideo" autoplay></video>
                        	<canvas height="385px" width="312px" id="mycanvas"></canvas>
                        </div>
                        <div class="ph1_bg3">
                        	<img src="image/mybaihee/zaza/5.png" height="103" width="84" id="imgg3"/>
                        </div>
                        <input id="upload" type="file" name="file" onchange="change(this)"/>
                        <input id="paizhao" type="button" value="拍照"/>
                       <button id="snapPhoto" onClick="canvas()">确定</button><br /><br />
                       <a id="wbaocun" class="orange" href="javascript:;">保 存</a>
                        
                    </div>
                    
                    <div class="ph2">
                    	<h5 class="bt_red">错误示范</h5>
                    	<ul>
                            <li><img src="image/myphoto/mo.jpg" alt="">照片不清晰</li>
                            <li><img src="image/myphoto/pic_03.jpg" alt="">倾斜颠倒</li>
                            <li><img src="image/myphoto/pic_04.jpg" alt="">非头部位置</li>
                            <li><img src="image/myphoto/pic_05.jpg" alt="">裸露不文明</li>
                            <li><img src="image/myphoto/pic_06.jpg" alt="">墨镜遮挡</li>
                            <li><img src="image/myphoto/pic_01.jpg" alt="">非本人照片</li>
                
                        </ul>
                        <h5 class="bt_blue">正确示范</br></h5>
                        <ul>
                            <li class="pp"><img src="image/myphoto/pic_07.jpg" alt="" /></li>
                        </ul>
                	</div>
                    <div class="clear"></div>
            		
                   
					<style>
                    	#demo{
							margin-top:500px;
							}
                    </style>
                    
                    <div class="prompt">
                        <p>温馨提示：</p>
                        <ul>
                            <li>• 请您上传本人近期清晰的照片，最多可以上传24张，仅支持<span>PNG、JPG、JPEG、BMP、GIF</span>格式，单张照片大小不超过8M。</li>
                            <li>• 凡是上传军人照或非本人照片（例如风景照、宠物照、明星/名人/网络红人等他人照片）均予以删除并承担相应的法律责任</li>
                            <li>• 如照片未通过审核请重新选择其他照片进行上传，未通过的照片系统将保留7天后自动删除。<span><a href="" target="_blank">查看上传照片注意事项</a></span></li>
                        </ul>
            		</div>
                    
                </div>
               </div>
        <script>
        	// JavaScript Document
//将图片加载到指定位置
				
			function change(file){
				document.getElementById("imgg1").style.display="block";
				document.getElementById("imgg2").style.display="block";
				document.getElementById("imgg3").style.display="block";
				document.getElementById("myvideo").style.display="none";
				document.getElementById("mycanvas").style.display="none";
			    var files = !!file.files ? file.files : [];
			    if (!files.length || !window.FileReader) return;
			
			        // Create a new instance of the FileReader创建一个新实例的有
			        var reader = new FileReader();
			  
			        // Read the local file as a DataURL
			        reader.readAsDataURL(files[0]);
			  
			        // When loaded, set image data as background of div
					var img=$('#imgg1');
			        reader.onloadend = function(){
					img.attr("src",this.result);
					$("#imgg2").attr("src",this.result);
					$("#imgg3").attr("src",this.result);
        
     			 }
		}
		
								//调取本地摄像头
								var snapPhoto = document.getElementById("snapPhoto");
								var paizhao = document.getElementById("paizhao");
								var canvas = document.getElementById("mycanvas");
								var context = canvas.getContext("2d");
								
								var video = document.getElementById("myvideo");
								paizhao.addEventListener("click" , function(){
									navigator.getMedia = (navigator.getUserMedia ||
															navigator.webkitGetUserMedia||
															navigator.mozGetUserMedia||
															navigator.msGetUserMedia);	
									navigator.getMedia(
										{
											video:true,
											audio:false,	
										},
										function(localMediaStream){
											video.src = window.URL.createObjectURL(localMediaStream);
											
											video.onloademetadata = function(e){
													
											}	
										},
										function(err){
											console.log("The following error occured: "+err);	
										}
									);
									document.getElementById("myvideo").style.display="block";
									document.getElementById("mycanvas").style.display="block";
									document.getElementById("imgg1").style.display="none";
									document.getElementById("imgg2").style.display="none";
									document.getElementById("imgg3").style.display="none";
								});
								
								
								snapPhoto.addEventListener("click",function(){
									document.getElementById("mycanvas").style.display="block";
									document.getElementById("imgg1").style.display="none";
									document.getElementById("imgg2").style.display="none";
									document.getElementById("imgg3").style.display="none";
									
									//document.getElementById("mycanvas").style.display="none";
									
									context.drawImage(video,0,0,640,480);
									document.getElementById("myvideo").style.display="none";
								})
							
							//将数据流转化为图片
							function convertCanvasToImage(canvas) {
								var image = new Image();
								image.src = canvas.toDataURL("image/png");
								return image;
							}
								/*//以下开始编 数据
								
                                  var imgData = canvass.toDataURL();
								  
								//将图像转换为base64数据
              					 base64Data = imgData.substr(22);
								//在前端截取22位之后的字符串作为图像数据
								 
								//图片加载到指定位置*/
								
									
									//获取路劲
									/*var result=convertCanvasToImage(canvass);
									document.getElementById("imgg1").style.src=result;
									document.getElementById("imgg2").style.src=result;
									document.getElementById("imgg3").style.src=result;
									
									var img=$('#imgg1');
									img.attr("src",this.result);
									$("#imgg2").attr("src",this.result);
									$("#imgg3").attr("src",this.result);*/
								
							
							/*function convertCanvasToImage(canvas) {
								var image = new Image();
								image.src = canvas.toDataURL("image/png");
								return image;
							}	*/
							
    				selectrate=1;
    				rate=1;
					function preview(img, selection) {
						if (!selection.width || !selection.height)
							return;
							//此处是用来利用剪切技术
						var scaleX =  $(".ph1_bg2").width() / selection.width;
						var scaleY =  $(".ph1_bg2").height() / selection.height;
						var scaleX1 =  $(".ph1_bg3").width() / selection.width;
						var scaleY1 =  $(".ph1_bg3").height() / selection.height;
						$('.ph1_bg2 img').css({
							width : Math.round(scaleX *  $("#imgg1").width()),
							height : Math.round(scaleY * $("#imgg1").height()),
							marginLeft : -Math.round(scaleX * selection.x1),
							marginTop : -Math.round(scaleY * selection.y1)
						});
							
						$('.ph1_bg3 img').css({
							width : Math.round(scaleX1 *  $("#imgg1").width()),
							height : Math.round(scaleY1 * $("#imgg1").height()),
							marginLeft : -Math.round(scaleX1 * selection.x1),
							marginTop : -Math.round(scaleY1 * selection.y1)
						});
							
					}
						
					
					window.onload=function(){
						init();
					}
					
					
					function init(){
						var width=$('#imgg1').width();
						var height=$('#imgg1').height();
						$('#imgg1').imgAreaSelect({
						  aspectRatio : "1:1",
						  handles : true,
						  fadeSpeed : 200,
						  onSelectChange : preview,
					});
						
				}
							
        
        </script>	
			
			<!-- InstanceEndEditable -->
            
           </div>
        </div>
    </div>
  	<div id="four">
    	<img src="image/1.jpg" height="90px" width="1000px">
    </div>
    <!--尾部-->
    <script type="text/javascript" src="js/foot.js" charset='utf-8'></script>
</body>
<!-- InstanceEnd --></html>
